import {
  defineComponent,
  reactive,
  onBeforeUnmount,
  provide,
  inject,
  getCurrentInstance
} from "vue";
import {designComponent} from '../../../src/use/designComponent'
interface Route {
  path?: string;
  hash?: string;
  param?: { [k: string]: string };
}
// const APP_NAVIGATOR_PROVIDER = "@@app-navigator";

function getRoute(): Route {
  let locationHash = window.location.hash || "";
  if (locationHash.charAt(0) === "#") {
    locationHash = locationHash.slice(1);
  }
  const [path, hash] = decodeURIComponent(locationHash).split("#");
  return { path, hash };
}
// function useAppNavigator(props: { defaultPath?: string }) {
//   // 获取上下本
//   // const ctx = getCurrentInstance();
//   // console.log(ctx);
//   //

//   const currentRoute = getRoute();
//   !currentRoute.path && (currentRoute.path = props.defaultPath);
//   const state = reactive({ route: currentRoute });
//   const methods = {
//     go(path: string) {
//       window.location.hash = encodeURIComponent(path);
//     }
//   };
//   const handler = {
//     hashchange: () => {
//       state.route = getRoute();
//     }
//   };
//   const refer = {
//     state,
//     methods
//   };
//   // 获取上下文中的方法
//   let ctx = getCurrentInstance();
//   // 将refer 赋值给ctx 就可以获取所有的状态和methods了通过_refer变量
//   (ctx as any)._refer = refer;
//   window.addEventListener("hashchange", handler.hashchange);
//   onBeforeUnmount(() =>
//     window.removeEventListener("hashchange", handler.hashchange)
//   );
//   provide(APP_NAVIGATOR_PROVIDER, refer);
//   return refer;
// }

// export function injectAppNavigator() {
//   return inject(APP_NAVIGATOR_PROVIDER) as ReturnType<typeof useAppNavigator>;
// }
export const AppNavigator=designComponent({
  name:'app-navigator',
  props:{
    defaultPath:String,
  },
  provideRefer: true,
  setup(props,setupContext){
    let initRoute=getRoute()
    if(!initRoute){
      initRoute={path:props.defaultPath}
    }
    const state=reactive({route:initRoute})
    const utils={
      reset:()=>{
        const route=getRoute()
        if(!!route){
          state.route=route
        }
      }
    }
    const handler={
      hashchange:()=>utils.reset()
    }
    const methods={
      go: (path: string)=>{
        window.location.hash=encodeURIComponent(path)
      }
    }
    window.addEventListener('hashchange',handler.hashchange)
    onBeforeUnmount(()=>window.removeEventListener('hashchange', handler.hashchange))
    //   const currentRoute = getRoute();
  // !currentRoute.path && (currentRoute.path = props.defaultPath);
  // const state = reactive({ route: currentRoute });
  // const methods = {
  //   go(path: string) {
  //     window.location.hash = encodeURIComponent(path);
  //   }
  // };
  // const handler = {
  //   hashchange: () => {
  //     state.route = getRoute();
  //   }
  // };
  const refer = {
    state,
    methods
  };
  return {
    refer,
    render:()=>{
      return  !!setupContext.slots.default ? setupContext.slots.default() : null;
    }
  }
  // 获取上下文中的方法
//   let ctx = getCurrentInstance();
//   // 将refer 赋值给ctx 就可以获取所有的状态和methods了通过_refer变量
//   (ctx as any)._refer = refer;
//   window.addEventListener("hashchange", handler.hashchange);
//   onBeforeUnmount(() =>
//     window.removeEventListener("hashchange", handler.hashchange)
//   );
//   provide(APP_NAVIGATOR_PROVIDER, refer);
//   return refer;

//    return {
//     render:()=>
//        !!setupContext.slots.default ? setupContext.slots.default() : null;
    
//    }
//   }
// })
// export const AppNavigator = defineComponent({
//   name: "app-navigator",
//   props: {
//     defaultPath: String
//   },
//   setup(props, setupContext) {
//     useAppNavigator(props);
//     return () =>
//       !!setupContext.slots.default ? setupContext.slots.default() : null;
  }
});
